<template>
<van-nav-bar
    left-arrow
    @click-left="gotoleft"
    title="产品详情"
  />
<div class="detail-container">
  <van-dialog id="van-dialog" />

  <div class="img-box">
    <van-image
    v-if="goods.primaryPicUrl"
      class="goods-img"
      lazy-load
      :src="goods.primaryPicUrl">
          <template v-slot:error>加载失败</template>
    </van-image>
  </div>
  <div class="goods-name">{{goods.goodsName}}</div>
  <div>
    <text class="goods-points">{{goods.retailPrice}}积分</text>
    <text class="goods-price">￥{{goods.virtualPrice}}</text>
  </div>
  <div class="divide-line"></div>

  <van-tabs active="{{ active }}" color="#00b034" line-width="150px" line-height="2px">
    <van-tab title="产品详情">
      <div class="detail-tab">
        {{goods.groupAttrs[0]}}
      </div>
    </van-tab>
    <van-tab title="积分规则">
      <div class="rule-tab">{{goods.groupAttrs[1]}}</div>
    </van-tab>
  </van-tabs>

  <div class="bottom">
    <div class="total">总计：<text class="points">{{goods.retailPrice||goods.virtualPrice}}积分</text></div>
    <div class="share-btn" bindtap="toShare">
      <van-image class='sharepng' :src="sharepng"></van-image>
      <text>分享得积分</text>
    </div>
    <div class="exchange-btn" @click="exchange">立即兑换</div>
  </div>
</div>
</template>

<script>
import sharepng from '../assets/images/share.png'
import {
  GetGoodsDetail
} from '@/api'
import {reactive,toRefs} from 'vue'
import router from '../router'
import { Toast } from 'vant';
export default {
  name: 'detail',
  setup(props) {
    //参数
    let detail = reactive({
      active: 0,
      goods:null,
      goodsID:'',
      standard:'',
      sharepng
    })
    
    detail.goodsID = router.currentRoute.value.query.goodsID
    detail.standard = router.currentRoute.value.query.standard
    console.log('edit',detail,router)
    GetGoodsDetail({
      goodsId: detail.goodsID,
      specIds: detail.standard
    }).then(res => {
      console.log('get goods detail==>', res)
      if(res.code === 0){
          detail.goods=res.data
      }
    })
    function exchange() {
      if(localStorage.getItem('token')){
        router.push({
          name:'confirmOrder',
            query:{
              goodsID:detail.goodsID,
              standard:detail.standard
            }
        })
      }else{
        Toast('请登录后操作！')
        router.push('/login')
      }
    }
    function gotoleft(){
      router.go(-1)
    }
    //挂载
    return{ ...toRefs(detail),exchange,gotoleft}
  }
}
</script>

<style scoped>
.detail-container {
  width: 100%;
  min-height: 100%;
  padding-bottom: calc(90px + env(safe-area-inset-top));
  box-sizing: border-box;
}

.img-box {
  width: 100%;
  height: 600px;
}

.img-box .goods-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.goods-name {
  margin-left: 30px;
  font-size: 35px;
  font-weight: bold;
}

.goods-points {
  margin-left: 30px;
  color: #00b034;
}

.goods-price{
  margin-left: 20px;
  font-size: 28px;
  text-decoration: line-through;
  color:#9c9c9c;
}

.divide-line {
  width: 100%;
  height: 15px;
  margin-top: 20px;
  background-color: #e6e6e6;
}

.detail-tab,.rule-tab{
  padding:40px;
  box-sizing: border-box;
  line-height: 50px;
  color:#9c9c9c;
}

.detail-tab view:not(:first-child){
  margin-top: 10px;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e6e6e6;
}

.bottom .total {
  margin-left: 30px;
}

.bottom .total .points{
  color:red;
}

.bottom .share-btn {
  display: flex;
  align-items: center;
  color:#9c9c9c;
}

.sharepng {
  display: block;
  width: 35px;
  height: 35px;
  margin-right: 10px;
}

.bottom .exchange-btn {
  /* width:150px;
  height: 50px; */
  padding:20px;
  color:#ffffff;
  background-color: #31b573;
  text-align: center;
}
</style>